import React, { useState, useEffect } from 'react';
import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';
import { NavBar, Skeleton, Toast } from 'antd-mobile';
import './member.less';
import axios from 'axios';
import { history } from 'umi';
import getTimeS from '../message/times';
let options = {
  SDKAppID: 1400804136, // 即时通信IM 应用的 SDKAppID
};
let tim = TIM.create(options);
tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
tim.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });
let pdata = JSON.parse(sessionStorage.getItem('userdata'));

export default function index() {
  // 初始化会话列表
  const [conversationList, setConversationList] = useState([]);
  const [lookdone, setlookdone] = useState(false);
  const [errdone, seterrdone] = useState(false);

  // let onSdkReady = function(event) {
  //   console.log(1111);

  //   getMessageList();
  //   setlookdone(true);

  // };
  // tim.on(TIM.EVENT.SDK_READY, onSdkReady);

  useEffect(() => {
    // 登录
    tim.login({
      userID: pdata.userID,
      userSig: pdata.userSig,
    });
    setTimeout(() => {
      getMessageList();
      setTimeout(() => {
        setlookdone(true);
      }, 1000);
    }, 1000);
  }, []);
  const getMessageList = async () => {
    let { data } = await tim.getConversationList(); //获取会话列表
    let list = data.conversationList;
    //给头像ID
    list.forEach(async (item1) => {
      let userdata = await axios.get(
        '/api/userhello?userID=' + item1.userProfile.userID,
      );
      item1.pdata = userdata.data[0];
    });
    // console.log(list, '11111111111111111');
    setTimeout(() => {
      setConversationList(list);
    }, 1000);
  };
  // 跳转将状态变已读
  const tomessage = (datas) => {
    tim.setMessageRead({ conversationID: datas.conversationID });
    // console.log(datas);
    history.push({ pathname: '/message', state: datas });
  };
  const back = () => {
    history.goBack();
  };
  return (
    <div className="member">
      <NavBar onBack={back}>信息</NavBar>
      {/* 骨架屏 */}
      {!lookdone ? (
        <div className="lodings">
          <Skeleton animated className="customSkeleton" />
          <Skeleton animated className="customSkeleton" />
          <Skeleton animated className="customSkeleton" />
          <Skeleton animated className="customSkeleton" />
          <Skeleton animated className="customSkeleton" />
          <Skeleton animated className="customSkeleton" />
          <Skeleton animated className="customSkeleton" />
        </div>
      ) : (
        <div className="allmessage">
          <div className="error"></div>
          {conversationList.length < 1
            ? ''
            : conversationList.map((item) => (
                <div
                  onClick={() => {
                    tomessage(item);
                  }}
                  className="message"
                  key={item.conversationID}
                >
                  {item.pdata ? <img src={item.pdata['face']}></img> : 111}
                  {/* {console.log(item.pdata,"item")} */}
                  <div className="desc">
                    <p>
                      <span className="username">{item.pdata.nickname}</span>
                      <span className="times">
                        {' '}
                        {getTimeS(item.lastMessage.lastTime * 1000, false)}
                      </span>
                    </p>
                    <p className="lastmessage">
                      {item.lastMessage.messageForShow}
                    </p>
                    {item.unreadCount > 0 ? (
                      <span className="weidu">{item.unreadCount}</span>
                    ) : (
                      ''
                    )}
                  </div>
                </div>
              ))}
        </div>
      )}
    </div>
  );
}
